<script setup lang="ts">

import {message} from "ant-design-vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {SycmBrandLists, SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import TradeConstituteChart
  from "~/contentScripts/views/sycm/brand_monitor/SycmBrandAnalysisCateTrade/TradeConstituteChart.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";

const loading = ref<boolean>(false);
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const brandLists = ref<SycmBrandLists>();
const dates = ref<Array<String>>([]);
const columns = ref<Array<any>>([]);
const dataSource = ref<Array<any>>([]);
const activeKey = ref<string>('1');
const calcDataSource = () => {
  dataSource.value = [];
  const data: any[] = [];

  const brand = {
    brand1: {
      title: brandLists.value?.brand1?.name,
      logo: brandLists.value?.brand1?.picUrl,
    },
    brand2: {
      title: brandLists.value?.brand2?.name,
      logo: brandLists.value?.brand2?.picUrl,
    },
    brand3: {
      title: brandLists.value?.brand3?.name,
      logo: brandLists.value?.brand3?.picUrl,
    },
  };
  if (activeKey.value == '1') {
    // 获取最大长度
    let maxLength = Math.max(
        brandLists.value?.brand1?.CateTradeData.length ?? 0,
        brandLists.value?.brand2?.CateTradeData.length ?? 0,
        brandLists.value?.brand3?.CateTradeData.length ?? 0,
    );

    for (let index = 0; index < maxLength; index++) {
      if (brandLists.value?.brand1 && typeof brandLists.value?.brand1?.CateTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand1,
          type: '品牌1',
          ...brandLists.value?.brand1?.CateTradeData[index]
        };
        data.push(obj);
      }
      if (brandLists.value?.brand2 && typeof brandLists.value?.brand2?.CateTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand2,
          type: '品牌2',
          ...brandLists.value?.brand2?.CateTradeData[index]
        };
        data.push(obj);
      }
      if (brandLists.value?.brand3 && typeof brandLists.value?.brand3?.CateTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand3,
          type: '品牌3',
          ...brandLists.value?.brand3?.CateTradeData[index]
        };
        data.push(obj);
      }
    }
  } else {

    // 获取最大长度
    let maxLength = Math.max(
        brandLists.value?.brand1?.PriceTradeData.length ?? 0,
        brandLists.value?.brand2?.PriceTradeData.length ?? 0,
        brandLists.value?.brand3?.PriceTradeData.length ?? 0,
    );
    for (let index = 0; index < maxLength; index++) {
      if (brandLists.value?.brand1 && typeof brandLists.value?.brand1?.PriceTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand1,
          type: '品牌1',
          ...brandLists.value?.brand1?.PriceTradeData[index]
        };
        data.push(obj);
      }
      if (brandLists.value?.brand2 && typeof brandLists.value?.brand2?.PriceTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand2,
          type: '品牌2',
          ...brandLists.value?.brand2?.PriceTradeData[index]
        };
        data.push(obj);
      }
      if (brandLists.value?.brand3 && typeof brandLists.value?.brand3?.PriceTradeData[index] !== 'undefined') {
        const obj = {
          brand: brand.brand3,
          type: '品牌3',
          ...brandLists.value?.brand3?.PriceTradeData[index]
        };
        data.push(obj);
      }
    }
  }
  console.log(data);
  dataSource.value = data;
};
const calcColumns = () => {
  if (activeKey.value == '1') {
    columns.value = [
      {
        dataIndex: 'brand.title',
        title: '品牌名称',
        width: 180,
        dataType: 'brand',
        sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
        dataField: {
          brand_name: 'brand.title',
          brand_logo: 'shop.logo',
        },
      },
      {
        dataIndex: 'type',
        title: '类别',
        width: 80,
        sorter: (a: any, b: any) => a.type.localeCompare(b.type),
        dataType: 'custom',
        slot: 'type',
      },
      {
        dataIndex: 'cateName',
        title: '类目名称',
        sorter: (a: any, b: any) => a.cateName.localeCompare(b.cateName),
      },
      {
        dataIndex: 'payAmt.ratio',
        title: '支付金额占比',
        // width: 120,
        sorter: (a: any, b: any) => a.payAmt.ratio - b.payAmt.ratio,
        align: 'right',
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      },
      {
        dataIndex: 'payItemCnt.ratio',
        title: '支付商品数占比',
        // width: 120,
        sorter: (a: any, b: any) => a.payItemCnt.ratio - b.payItemCnt.ratio,
        align: 'right',
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      },
      {
        dataIndex: 'paySlrCnt.ratio',
        title: '支付买家数占比',
        sorter: (a: any, b: any) => a.paySlrCnt.ratio - b.paySlrCnt.ratio,
        align: 'right',
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      }
    ];
  } else {
    columns.value = [
      {
        dataIndex: 'brand.title',
        title: '品牌名称',
        width: 180,
        dataType: 'brand',
        sorter: (a: any, b: any) => a.shop.title.localeCompare(b.shop.title),
        dataField: {
          brand_name: 'brand.title',
          brand_logo: 'shop.logo',
        },
      },
      {
        dataIndex: 'type',
        title: '类别',
        width: 80,
        sorter: (a: any, b: any) => a.type.localeCompare(b.type),
        dataType: 'custom',
        slot: 'type',
      },
      {
        dataIndex: 'attrName.value',
        title: '价格带',
        sorter: (a: any, b: any) => a.attrName.value.localeCompare(b.attrName.value),
      },
      {
        dataIndex: 'payAmt.value',
        title: showZs.value ? '交易指数' : '交易金额',
        // width: 120,
        align: 'right',
        sorter: (a: any, b: any) => a.payAmt.value - b.payAmt.value,
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00';
          }
          return SycmTableUtils.tranNumber(showZs.value, item, 2);
        }
      },
      {
        dataIndex: 'payAmt.ratio',
        title: '支付金额占比',
        // width: 120,
        align: 'right',
        sorter: (a: any, b: any) => a.payAmt.ratio - b.payAmt.ratio,
        dataType: 'customRender',
        render: (item: any) => {
          if (!item || isNaN(item)) {
            return '0.00%';
          }
          return (item * 100).toFixed(2) + '%';
        }
      },
      {
        dataIndex: 'payItemCnt.value',
        title: '支付商品数',
        // width: 120,
        align: 'right',
        sorter: (a: any, b: any) => a.payItemCnt.value - b.payItemCnt.value,
      }
    ];
  }

}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    },
  },__option)) {
    loading.value = true;
    const data = await SycmBrandMonitor.assignBrandCateTradeData(await SycmBrandMonitor.getBrands());
    console.log('获取构成', data);
    if (!data) {
      message.error('获取数据失败,请重试!');
      loading.value = false;
      return;
    }
    brandLists.value = data;
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
watch(() => activeKey.value, () => {
  calcColumns();
  calcDataSource();
}, {deep: true});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-品牌分析-交易构成`" width="1200px" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 150px);overflow-y: auto;">

        <a-tabs v-model:active-key="activeKey">
          <a-tab-pane key="1" tab="类目构成">
          </a-tab-pane>
          <a-tab-pane key="2" tab="价格构成">
          </a-tab-pane>
        </a-tabs>
        <TradeConstituteChart :brand-lists="brandLists" :active-key="activeKey"/>
        <base-table table-name="竞争-品牌分析-交易构成" :columns="columns" :data-source="dataSource"
                    :scroll="{
        // y:750,
        y:450,
      }"
        >
          <template #type="record">
            <a-tag color="green" v-if="record.type==='品牌1'">
              品牌1
            </a-tag>
            <a-tag color="purple" v-else-if="record.type==='品牌2'">
              品牌2
            </a-tag>
            <a-tag color="orange" v-else-if="record.type==='品牌3'">
              品牌3
            </a-tag>
          </template>
        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
